<template>
  <div class="workbench">
    <div class="data-overview">
      <div class="title">
        <span>数据概览</span>
        <p>更新时间：2021年6月19日</p>
      </div>
      <div class="data-classify">
        <BulkData
          :color="'skyblue'"
          :title="'今日销售额'"
          :count="'765,400.00'"
          :percent="'+ 16.57%'"
          :icon="'price'"
        />
        <BulkData
          :color="'lightgreen'"
          :title="'今日订单数'"
          :count="'6988'"
          :percent="'+ 10.57%'"
          :icon="'orderform'"
        />
        <BulkData
          :color="'#1558a5'"
          :title="'今日销售利润'"
          :count="'765,400.00'"
          :percent="'+ 16.57%'"
          :icon="'profit'"
        />
        <BulkData
          :color="'#da5072'"
          :title="'今日销售额'"
          :count="'765,400.00'"
          :percent="'+ 16.57%'"
          :icon="'sell'"
        />
        <BulkData
          :color="'#fab216'"
          :title="'今日新增用户'"
          :count="'8689'"
          :percent="'+ 16.37%'"
          :icon="'adduser'"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineComponent } from "vue";
import BulkData from "@/components/element/BulkData.vue";
defineComponent({
  BulkData,
});
</script>

<style lang="scss" scoped>
.workbench {
  width: 60vw;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #fff;
  .data-overview {
    padding: 0.9375rem;
    .title {
      display: flex;
      align-items: center;
      span {
        font-size: 14px;
        color: #666;
      }
      p {
        margin-left: 0.625rem;
        color: #ccc;
        font-size: 12px;
      }
    }
  }
  .data-classify {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
  }
}
</style>
